<template>
   <div class="page-content">
    <!-- 页面内容 -->
    <div class="article-list-view">
    <!-- 标签过滤组件 -->
    <!-- <TagFilter
      :tags="tags"
      :selected-tag="selectedTag"
      @update:selectedTag="handleTagChange"
    /> -->

    <!-- 文章列表组件 -->
    <ArticleList
      :articles="articleList"
      :loading="loading"
      :initial-loading="initialLoading"
      :no-more="noMore"
      :error="error"
      @load-more="loadMoreArticles"
    />
  </div>
  </div>

</template>

<script setup>
import { ref, watch, computed, getCurrentInstance } from 'vue';
import TagFilter from '@/components/Article/TagFilter.vue';
import ArticleList from '@/components/Article/ArticleList.vue';

const { proxy } = getCurrentInstance();

// 常量
const PAGE_SIZE = 10; // 每页文章数量
const API_URL = 'api/articles/page'; // 文章列表 API 地址

// 响应式变量
const selectedTag = ref('全部'); // 当前选中的标签
const articleList = ref([]); // 文章列表
const totalArticles = ref(0); // 总文章数量
const currentPage = ref(1); // 当前页码
const initialLoading = ref(false); // 是否正在加载初始数据
const loading = ref(false); // 是否正在加载更多数据
const noMore = ref(false); // 是否没有更多数据
const error = ref(null); // 错误信息

// 标签数据
const tags = ['全部', '前端', '后端', 'Vue', 'React', 'Node.js'];

// 初始化加载文章
const loadInitialArticles = async () => {
  console.log('loadInitialArticles');
  try {
    initialLoading.value = true;
    error.value = null;

    const response = await proxy.$axios.post(API_URL, {
      pageNum: currentPage.value,
      pageSize: PAGE_SIZE,
      queryParam: {
        status: 'published',
      }
    });

    const data = response.data;
    articleList.value = data.records;
    totalArticles.value = data.total;
    checkNoMore(data.records);
  } catch (err) {
    error.value = '加载文章失败，请重试';
    console.error(err);
  } finally {
    initialLoading.value = false;
  }
};

// 加载更多文章
const loadMoreArticles = async () => {
  if (noMore.value || loading.value) return;

  try {
    loading.value = true;
    currentPage.value += 1;

    const response = await proxy.$axios.post(API_URL, {
      pageNum: currentPage.value,
      pageSize: PAGE_SIZE,
      article: {
        status: 'published',
        tags: selectedTag.value === '全部' ? undefined : selectedTag.value
      }
    });

    const data = response.data;
    articleList.value.push(...data.records);
    checkNoMore(data.records);
  } catch (err) {
    error.value = '加载更多文章失败，请重试';
    console.error(err);
  } finally {
    loading.value = false;
  }
};

// 检查是否没有更多数据
const checkNoMore = (records) => {
  if (records.length < PAGE_SIZE) {
    noMore.value = true;
  }
};

// 处理标签变化
const handleTagChange = (tag) => {
  console.log('selectedTag', tag);
  selectedTag.value = tag;
  currentPage.value = 1; // 重置页码
  articleList.value = []; // 清空文章列表
  loadInitialArticles(); // 重新加载数据
};

// 初始化加载
loadInitialArticles();
</script>

<style scoped>
.page-content {
  padding-top: 80px; /* 根据头部高度调整 */
}
.article-list-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .article-list-view {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .article-list-view {
    padding: 5px;
  }
}
</style>